<template>
<!-- 编辑基本信息页面 -->
  <div>
    <el-form style="fontSize:12px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="课程封面:">
            <upload></upload>
          </el-form-item>
        <el-form-item label="课程名称：" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入课程名称，30个文字以内"></el-input>
        </el-form-item>
        <el-form-item label="授课教师：">
            <div class="giveLessons">
                <span>鱼老师</span>
                <span class="giveLessonsShow" @click="updateTeacher" v-if="showChange">更换老师</span>
            </div>
        </el-form-item>
        <el-form-item label="科目：" prop="subject">
            <el-select v-model="ruleForm.subject" placeholder="请选择活动区域">
            <el-option label="摄影" value="shanghai"></el-option>
            <el-option label="美术" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="知识点：" prop="knowledge">
            <el-select v-model="ruleForm.knowledge" placeholder="请选择活动区域">
            <el-option label="摄影" value="shanghai"></el-option>
            <el-option label="美术" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="课程标签：">
            <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            :disable-transitions="false">
            {{tag}}
            </el-tag>
            <el-button class="button-new-tag" size="small" @click="showInput1"><span>+ 添加</span></el-button>
        </el-form-item>
        <el-form-item label="起止日期：" required>
            <el-col :span="8">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="8">
            <el-form-item prop="date2">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
            </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="可报名人数：" prop="delivery">
            <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="10000" label="描述文字" />
            <span> 人</span>
        </el-form-item>
        <el-form-item label="课程收费方式：">
            <el-radio-group v-model="ruleForm.resource">
            <el-radio :label="1"><span>按课时</span></el-radio>
            <el-radio :label="2"><span>按课程</span></el-radio>
            <el-radio :label="3"><span>按学年</span></el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="价格：" prop="price">
            <el-input style="width:150px" size="mini" v-model="ruleForm.price" placeholder="请设置价格"></el-input>
            <span> 鱼丸/课时</span>
        </el-form-item>
        <el-form-item label="课程退课扣费规则：">
            <el-radio-group v-model="ruleForm.radio">
            <el-radio :label="1"><span>不扣费</span></el-radio>
            <el-radio :label="2"><span>扣费，全部未上课时的10%</span></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="授课方式：">
            <el-radio-group v-model="ruleForm.radio2">
            <el-radio :label="1"><span>线下授课</span></el-radio>
            <el-radio :label="2"><span>线上授课</span></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许线上授课：">
            <el-switch v-model="ruleForm.delivery"></el-switch>
            <span style="color:red">开启时，自动生成一个线上直播课</span>
        </el-form-item>
         <el-form-item label="线上直播课价格：" prop="price2">
            <el-input style="width:150px" size="mini" v-model="ruleForm.price2" placeholder="请设置价格"></el-input>
            <span> 鱼丸/课时</span>
        </el-form-item>
         <el-form-item label="授课教室：">
            <el-cascader
            v-model="ruleForm.value"
            :options="options"
            @change="handleChange2"></el-cascader>
        </el-form-item>
        <el-form-item label="是否允许课后回放：">
            <el-radio-group v-model="ruleForm.radio3">
            <el-radio :label="1"><span>允许</span></el-radio>
            <el-radio :label="2"><span>不允许</span></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="回放视频保留时长：">
            <el-radio-group v-model="ruleForm.radio4">
            <el-radio :label="1"><span>24小时</span></el-radio>
            <el-radio :label="2"><span>7天</span></el-radio>
            <el-radio :label="3"><span>15天</span></el-radio>
            <el-radio :label="4"><span>30天</span></el-radio>
            </el-radio-group>
            <el-button class="button-new-tag" size="small" @click="autoShowInput2"><span>+ 其他</span></el-button>
        </el-form-item>
        <el-form-item label="是否推荐课程：">
            <el-radio-group v-model="ruleForm.radio5">
            <el-radio :label="1"><span>是</span></el-radio>
            <el-radio :label="2"><span>否</span></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="课程简介：" >
            <quill-editor :options="ruleForm.editorOption" @change="onEditorChange($event)" v-model="ruleForm.synopsis"></quill-editor>
             <!-- :options="editorOption" -->
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
    </el-form>


    <!-- 更换教师对话框 -->
          <!-- @childFn='parentFn'(父亲接收子传递过来的值) :hiddens='dialogVisible'(子向父传递参数) -->
        <dialogIndex @childFn='parentFn' :hiddens='dialogVisible'>
          <el-form ref="formrules1" :model="infeform" label-width="100px">
            <el-form-item label="当前教师：">
                <span>鱼老师</span>
            </el-form-item>
            <el-form-item label="新教师：" prop="value">
                <el-select v-model="infeform.value" placeholder="请选择教师">
                    <el-option label="李老师" value="shanghai1"></el-option>
                    <el-option label="王老师" value="beijing2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        </dialogIndex>
        <!-- 课程标签 -->
        <dialogIndex @childFn='parentFn' :hiddens='dialogVisible1'>
        <el-form ref="formrules2" :rules="formrules2" :model="infeform1" label-width="100px">
            <el-form-item label="标签名称：" prop="name">
                <el-input v-model="infeform1.name" placeholder="请输入标签名称，16个文字以内"></el-input>
            </el-form-item>
        </el-form>
        </dialogIndex>
        <!-- 自定义时长 -->
        <dialogLive @childFn='parentFn2' :hiddens='dialogVisible2'>
          <el-form name="autoForm"  ref="autoRef" :rules="autoRules" :model="autoValue">
            <el-form-item label="单位：" prop="value">
              <el-select v-model="autoValue.value" size="mini" style="width:120px">
                <el-option label="年" value="nian"></el-option>
                <el-option label="月" value="yue"></el-option>
                <el-option label="日" value="ri"></el-option>
                <el-option label="小时" value="shi"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="时长：" prop="duration">
                <el-input-number size="mini" style="width:120px" v-model="autoValue.duration" @change="durationHandleChange" :min="1" label="描述文字" />
            </el-form-item>
          </el-form>
        </dialogLive>
  </div>
</template>

<script>
import dialogIndex from '../../campusManagement/components/dialog'
import dialogLive from '../components/dialog'
import Upload from '@/components/commons/Upload/index.vue'//上传图片

export default {
  name: 'basicInformation',
  components:{
      dialogIndex,
      dialogLive,
      Upload
  },
  data() {
      return {
          // 对话框的基本内容
        dialogVisible:{},
        dialogVisible1:{},
        // 自定义时长
        dialogVisible2:{},
        ruleForm: {
          name: '',//课程名称
          subject: '',//科目
          knowledge:'',//知识点
          labels:[],//课程标签，下面有
          date1: '',
          date2: '',
          delivery: false,//是否允许线上授课
          price:'',//价格
          price2:'',//线上直播课价格
          type: [],
          value: [],//级联选择
          resource: 1,//收费方式
          radio:1,//扣费规则
          radio2:1,//授课方式
          radio3:1,//是否允许课后回放
          radio4:1,//回放视频保留时长
          radio5:1,//是否推荐课程
          desc: '',
          num:1,//计数器默认值
          dynamicTags2:[],//自定义时长
          synopsis:'',//富文本内容,
          editorOption: {
              modules: {
                toolbar: [
                  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                  ["blockquote", "code-block"], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                  [{ script: "sub" }, { script: "super" }], // 上标/下标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  // [{'direction': 'rtl'}],                         // 文本方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ["clean"], // 清除文本格式
                  ["link", "image", "video"] // 链接、图片、视频
                ], //工具菜单栏配置
              },
              placeholder: '请在这里添加产品描述', //提示
              readyOnly: false, //是否只读
              theme: 'snow', //主题 snow/bubble
              syntax: true, //语法检测
            }
          // editorOption里是放图片上传配置参数用的，例如：
        // action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
        // methods: 'post',  // 必填参数 图片上传方式
        // token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        // name: 'upload_file',  // 必填参数 文件的参数名
        // size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        // accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
        },
        // 验证规则
        rules: {
          name: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { min: 2, max: 30, message: '长度在 2 到 30 个文字以内', trigger: 'blur' }
          ],
          subject: [
            { required: true, message: '请选科目', trigger: 'change' }
          ],
          knowledge: [
            { required: true, message: '请选知识点', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          price: [
            { required: true, message: '请设置价格', trigger: 'blur' }
          ],
          price2: [
            { required: true, message: '请设置价格', trigger: 'blur' }
          ],
        },
        // 更换老师标签显示隐藏
        showChange:true,
        // 课程标签
        dynamicTags: ['课程标签一', '课程标签二', '课程标签三'],
        // 课程与新老师显示隐藏
        inputVisible: true,
        inputValue: '',
        // 级联选择
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致',
              children:[{
                  value:'siji',
                  label:'四级'
              }]
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        // 更换老师表单
        infeform:{
            title:'',
            value:'',
        },
        // 课程标签表单
        infeform1:{
            name:'',
        },
        // 验证规则
        formrules2:{
            name:[
                { required: true, message: '请输入标签名称', trigger: 'blur' },
                { min: 2, max: 16, message: '长度在 2 到 16 个文字以内', trigger: 'blur' }
            ]
        },
        // 自定义时长
        autoValue:{
          value:'nian',//单位，默认年
          duration:'1',//时长，默认1
        },
        // 自定义时长验证规则
        autoRules:{
          
        }
      };
    },
    methods: {
        // 表单提交
      submitForm(formName) {
        //   console.log(this.$refs.text.value)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('childFn','sub')
            console.log(this.ruleForm);
            this.resetForm(formName)
          } else {
            console.log(formName);
            return false;
          }
        });
      },
    //   清除表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    //   课程标签(注释之间)

      showInput1() {
        this.inputVisible = false;
        this.dialogVisible1={
          // 显示、隐藏对话框
          visible:true,
          title:'课程标签',
          modal:true,//控制遮罩层的显示，默认显示
        }
        // this.$nextTick(_ => {
        //   this.$refs.saveTagInput.$refs.input.focus();
        // });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        // this.inputValue = '';
      },

        // 计数器值发生改变
        handleChange(value) {
            console.log(value);
        },
        // 级联选择
        handleChange2(value) {
            console.log(value);
            this.resetForm.value=value
        },

        //   富文本
        onEditorChange(editor){
            this.resetForm.subject=editor.html;
            console.log(editor)
        },

         // 点击更换老师
      updateTeacher(){
          this.inputVisible=true;
        this.dialogVisible={
          // 显示、隐藏对话框
          visible:true,
          title:'更换教师',
          modal:true,//控制遮罩层的显示，默认显示
        }
      },

    //   // 关闭并重置表单
    //   refsClose(){
    //       console.log(this.$refs.formrules)
    //       this.$refs.formrules.resetFields()
    //   },
      // 接收子组件传递的值
      parentFn(val){
        //   console.log(this.inputVisible)
          if(val=='sub'){
              if(this.inputVisible){
                //   点击的是更换老师
                  this.$message.success('保存');
                  this.$refs.formrules1.resetFields()
                  this.dialogVisible.visible=false
              }else{
                //   点击的是课程标签
                  this.$refs.formrules2.validate((valid) => {
                    if(!valid) return;
                    this.$message.success('保存1');
                    this.$refs.formrules2.resetFields()
                    this.dialogVisible1.visible=false
                })
              }
              // 重置表单
          }else{
              if(this.inputVisible){
                  this.$refs.formrules1.resetFields()
              }else{
                  this.$refs.formrules2.resetFields()
              }
          }
      },
      // 点击自定义时长按钮
      autoShowInput2() {

        this.dialogVisible2={
          visible:true,
          title:'自定义时长',
          modal:true,
          width:'20%'
        }
      },
      // 自定义时长接收子组件传递的值
      parentFn2(val){
        if(val=='sub'){
          console.log(this.autoValue)
          this.$message.success('成功');
          this.dialogVisible2.visible=false;
          this.$refs.autoRef.resetFields()
          
        }else if(val=='hiddens'){
          // console.log(val,'清除')
          this.$refs.autoRef.resetFields()
        }
      },
      // 自定义时长发生改变
      durationHandleChange(value){
        console.log(value)
      }

    },


    

}
</script>

<style lang="less" scoped>
span{
    font-size: 12px;
}
.giveLessons{
    font-size: 12px;
    .giveLessonsShow{
        margin-left: 6px;
        color: #58acde;
    }
}
// 课程标签样式
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-col-1{
      text-align: center;
  }

  // .button-new-tag[data-v-d16418e0]{
  //   margin-left: 100px;
  // }
</style>
